<template>
    <div>
        <h2>门店修改</h2>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>门店图片<span>*</span></td>
                    <td>
                        <input type="file" @change="img">
                        <img :src="aa.Photo" height="100" width="100" v-if="aa.Photo!=''" alt="">
                    </td>
                </tr>

                <tr>
                    <td>门店名称<span>*</span></td>
                    <td>
                        <input type="text" v-model="aa.ShopName">
                    </td>
                </tr>

                <tr>
                    <td>联系电话<span>*</span></td>
                    <td>
                        <input type="text" maxlength="11" v-model="aa.Phone">
                    </td>
                </tr>

                <tr>
                    <td>地区<span>*</span></td>
                    <td>
                        <select v-model="aa.Address">
                            <option value="" >请选择</option>
                            <option :value="item.Name" v-for="item in queryInfo.data" :key="item.Id">{{item.Name}}</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td>详细地址<span>*</span></td>
                    <td>
                        <input type="text" v-model="aa.AddressDetail">
                    </td>
                </tr>

                <tr>
                    <td>状态</td>
                    <td>
                        <input type="radio" name="state" :value="0" v-model="aa.State">是
                        <input type="radio" name="state" :value="1" v-model="aa.State">否
                    </td>
                </tr>

                <tr>
                    <td>开业日期</td>
                    <td>
                        <input type="date" v-model="aa.BeginTime">
                    </td>
                </tr>

                <tr>
                    <td>酒店介绍<span>*</span></td>
                    <td>
                        <textarea cols="50" rows="5" v-model="aa.Desc"></textarea>
                    </td>
                </tr>

                <tr>
                    <td>交通指引</td>
                    <td>
                        <textarea v-model="aa.Traffic"></textarea>
                    </td>
                </tr>

                <tr>
                    <td>门店政策</td>
                    <td>
                        <textarea v-model="aa.Policy"></textarea>
                    </td>
                </tr>

                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="修改" class="btn btn-info" @click="ok">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
const router=useRouter();
const route=useRoute();
import moment from 'moment';



///---------下拉-------
onMounted(()=>{
    getlist();
    getFan();
})

let queryInfo:any=reactive({
    data:[],
})

const getlist=()=>{
axios({
    method:'get',
    url:'/api/Week/GetWeekAddress',
})
.then(res=>{
    console.log(res);
   queryInfo.data=res.data; 
})
.catch(err=>{
    console.log(err);
})
}

//----------反填-------------
const getFan=()=>{
    axios({
        method:'get',
        url:'/api/Week/FanTian',
        params:{
            id:route.query.id
        }
    })
    .then(res=>{
        console.log(res);
        aa.Photo=res.data.Photo;
        aa.ShopName=res.data.ShopName;
        aa.Phone=res.data.Phone;
        aa.Address=res.data.Address;
        aa.AddressDetail=res.data.AddressDetail;
        aa.Desc=res.data.Desc;
        aa.Traffic=res.data.Traffic;
        aa.Policy=res.data.Policy;
        aa.State=res.data.State;
        aa.BeginTime=res.data.BeginTime.substring(0,10);

    })
    .catch(err=>{
        console.log(err);
    })
}

//---------添加-----------
let aa=reactive({
    "Id":route.query.id,
  "Photo": "",
  "ShopName": "",
  "Phone": "",
  "Address": "",
  "AddressDetail": "",
  "Desc": "",
  "Traffic": "",
  "Policy": "",
  "State": '',
  "BeginTime": "",
})

//图片上传
const img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData();
    f.append('file',obj);

    axios({
        method:'post',
        url:'/api/Imgs/UpFileImg',
        data:f
    })
    .then(res=>{
        console.log(res);
        if(res.data==-2){
            alert('上传图片大小超过2M');
            return;
        }
        if(res.data=="不是图片"){
            alert('上传的图片格式不对');
            return;
        }
        
        aa.Photo=res.data;
    })
    .catch(err=>{
        console.log(err);
    })
}

const ok=()=>{
    //有效性验证
    if(aa.ShopName==""){
        alert('门店名称不能为空');
        return;
    }
    axios({
        method:'put',
        url:'/api/Week/UpdWeekShop',
        data:aa
    })
    .then(res=>{
        console.log(res);
        if(res.data==-1){
            alert('手机号重复');
            return;
        }
        if(res.data>0){
            alert('成功');
            router.push('/showShop')
        }
        else{
            alert('失败')
        }
    })
}
</script>

<style scoped>
span{
    color:red;
}
</style>